<template>
    <div>
        <el-row>
        <component :is="content"></component>
        <el-col :span="20">
            <h2>保单操作</h2>
            <el-dialog
                    title="添加保单"
                    :visible.sync="show"
                    width="80%"
                    center>
                <el-form ref="form" label-width="80px">
                    <el-form-item label="客户名">
                        <el-input v-model="clientName"></el-input>
                    </el-form-item>
                    <el-form-item label="操作人">
                        <el-input v-model="userName"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="closeAdd">取消</el-button>
                <el-button type="primary" size="mini" style="float: right;margin-left: 10px" @click="addWarranty">添加</el-button>
            </el-dialog>
            <div>
                <div style="float:left">
                    <span>客户名：</span>
                    <el-input v-model="clientName" style="width: 200px;margin-left: 20px;margin-right: 10px;"></el-input>
                    <el-button type="primary" icon="el-icon-search" @click="searchWarranty">搜索</el-button>
                </div>
                <el-button type="primary" style="float: right;margin-left:18px" @click="openAdd">添加保单</el-button>
            </div>
    <el-table
            :data="tableData"
            border
    >
        <el-table-column
                prop="warrantyId"
                label="保单编号"
                >
        </el-table-column>
        <el-table-column
                prop="clientName"
                label="客户名"
                >
        </el-table-column>
        <el-table-column
                prop="userName"
                label="操作人"
        >
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                >
            <template slot-scope="scope">
                <el-button @click="warrantyDetails(scope.row,scope.$index)" type="primary" size="small">详情</el-button>
                <el-button type="primary" size="small" @click="deleteWarranty(scope.row)">删除</el-button>
            </template>
        </el-table-column>
    </el-table>
            <el-dialog
                    title="保单详情"
                    :visible.sync="show1"
                    width="80%"
                    center>
                <div>
                    <span>保单日期</span>
                    <el-input
                            v-model="warrantyDate"
                            :disabled="true"
                            style="width: 150px">
                    </el-input>
                    <span>保单状态</span>
                    <el-input
                            v-model="insuranceStatus"
                            :disabled="true"
                            style="width: 150px">
                    </el-input>
                    <span>保单总价</span>
                    <el-input
                            v-model="warrantyPrice"
                            :disabled="true"
                            style="width: 150px">
                    </el-input>
                </div>
                <el-button type="primary" style="float: right;margin-left:18px" @click="openAddInsurance()" >添加险种</el-button>
            <el-table
                    :data="warrantyDetailsData"
                    border
            >
                <el-table-column
                        prop="iid"
                        label="险种编号"
                >
                </el-table-column>
                <el-table-column
                        prop="iname"
                        label="险种名"
                >
                </el-table-column>
                <el-table-column
                    prop="iprice"
                    label="险种单价"
            >
            </el-table-column>
                <el-table-column
                        prop="iinfo"
                        label="险种详情"
                >
                </el-table-column>
                <el-table-column
                        fixed="right"
                        label="操作"
                        width="400">
                    <template slot-scope="scope">
                        <el-button  type="text" size="small" @click="deleteInsurance(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            </el-dialog>
            <el-dialog
                    title="添加险种"
                    :visible.sync="show2"
                    width="80%"
                    center>
                <el-table
                        :data="warrantyDetailsData"
                        border
                >
                    <el-table-column
                            prop="iname"
                            label="险种名"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="iprice"
                            label="险种单价"
                    >
                    </el-table-column>
                    <el-table-column
                            prop="iinfo"
                            label="险种详情"
                    >
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="400">
                        <template slot-scope="scope">
                            <el-button  type="text" size="small" @click="addInsurance(scope.row)">添加</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :current-page.sync="currentPage"
    >
    </el-pagination>
        </el-col>
        </el-row>
    </div>
</template>

<script>
    import NavMenu from "../components/NavMenu";
    export default {
        name: "WarrantyOperation",
        data(){
            return{
                insuranceStatus:'',
                warrantyDate:'',
                warrantyId:'',
                clientName:'',
                userName:'',
                content:NavMenu,
                currentPage:1,
                total:10,
                pageSize:3,
                tableData:[],
                warrantyDetailsData:[],
                show:false,
                show1:false,
                show2:false,
                iid:'',
                iname:'',
                iprice:'',
                iinfo:'',
                warrantyPrice:'',
                row1:''

            }
        },
        mounted() {
            this.init()
        },
        methods:{
            init(){
                this.$axios.get("api/warrantyList/"+this.currentPage+"/"+this.pageSize).then(
                    r=>{
                        this.tableData=r.data.warranties
                        this.total=r.data.total
                    }
                )
            },
            searchWarranty(){
                console.log(this.clientName)
                    this.$axios.get("api/warrantyList/"+this.clientName+"/"+this.currentPage+"/"+this.pageSize).then(
                        r => {
                            console.log(r.data)
                            this.tableData = r.data.warranties
                            this.total=r.data.total
                        }
                    )

            },
            openAdd(){
                this.show=true
            },
            closeAdd(){
                this.show = false
            },
            addWarranty(){
                    let fd = new FormData()
                    fd.append("clientName",this.clientName)
                    fd.append("userName",this.userName)
                this.$axios.post("api/addWarranty",fd).then(
                    r => {
                        if (r.data == 200) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.init()
                        } else {
                            this.$message({
                                message: '添加失败',
                                type: 'error'
                            });
                        }
                    }
                )
            },
            deleteWarranty(row){
                 this.warrantyId = row.warrantyId
                    this.$axios.delete("api/deleteWarranty/"+this.warrantyId).then(
                        r => {
                            if (r.data == 200) {
                                this.$message({
                                    message: '删除成功',
                                    type: 'success'
                                });
                                this.init()
                            } else {
                                this.$message({
                                    message: '删除失败',
                                    type: 'error'
                                });
                            }
                        }
                    )
            },
            //详情
            warrantyDetails(row,$index){
                this.show1=true
                this.warrantyId = row.warrantyId
                this.row1 = row
                this.$axios.get("/api/warrantyDetails/"+this.warrantyId).then(
                    r => {
                        console.log(r.data)
                        this.warrantyDetailsData = r.data.list
                        this.warrantyDate=r.data.date
                        this.insuranceStatus=r.data.warrantyStatus
                        this.warrantyPrice=r.data.total
                    }
                )
            },
            // 添加险种
            openAddInsurance(){
                this.show2=true
                this.$axios.get("api/insuranceTypeList/"+this.currentPage+"/"+this.pageSize).then(
                    r=>{
                        console.log(r.data)
                        this.warrantyDetailsData = r.data.list
                        this.total=r.data.total
                        this.pageSize=r.data.size
                    }
                )
            },
            addInsurance(row){
                   this.iid =row.iid
                this.$axios.get("api/addInsurance/"+this.iid+"/"+this.warrantyId).then(
                    r=>{
                        if (r.data == 200) {
                            this.$message({
                                message: '添加成功',
                                type: 'success'
                            });
                            this.warrantyDetails(this.row1)
                        } else {
                            this.$message({
                                message: '添加失败',
                                type: 'error'
                            });
                        }
                    }
                )
            },
            deleteInsurance(row){
                this.iid =row.iid
                console.log(this.warrantyId)
                this.$axios.delete("api/deleteInsurance/"+this.iid+"/"+this.warrantyId).then(
                    r=>{
                        if (r.data == 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success'
                            });
                            this.warrantyDetails(this.row1)
                        } else {
                            this.$message({
                                message: '删除失败',
                                type: 'error'
                            });
                        }
                    }
                )
            }
        }
    }
</script>

<style scoped>

</style>